<template>
  <el-tooltip content="返航备降记录">
    <el-button type="primary" link @click="handleClick">
      <el-icon
        :class="
          needForReportCounting > 0 && !isShowingToolbox && !isInPage
            ? 'icon-status-need'
            : ''
        "
      >
        <Notebook />
      </el-icon>
    </el-button>
  </el-tooltip>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import useJournalStore from "@/store/journal.js";
// import handleQuery from "./handleQuery.js";
import handleUpdateItem from "./handleUpdateItem.js";

const route = useRoute();
const journalStore = useJournalStore();

const handleClick = () => {
  journalStore.diversionShareStatus.showToolbox =
    !journalStore.diversionShareStatus.showToolbox;
};

const needForReportCounting = computed(
  () =>
    journalStore.diversionShareStatus.currentList.filter(
      (item) => item.reportPlan == 0 || item.reportFlow == 0
    ).length
);

const isShowingToolbox = computed(
  () => journalStore.diversionShareStatus.showToolbox
);

const isInPage = computed(() => route.name == "DiversionShare");

const loadCurrentList = (anyway = false) => {
  if (anyway || isShowingToolbox.value || isInPage) {
    handleUpdateItem();
  }
};

onMounted(() => {
  loadCurrentList(true);
  journalStore.diversionShareStatus.timerID = setInterval(() => {
    loadCurrentList(true);
  }, 10000);
});

onUnmounted(() => {
  clearInterval(journalStore.diversionShareStatus.timerID);
  journalStore.diversionShareStatus.timerID = 0;
});
</script>

<style lang="css" scoped>
.icon-status-need {
  font-weight: bolder;
  animation: colorChange 1000ms infinite ease-out;
}

@keyframes colorChange {
  from {
    color: var(--el-color-danger);
  }
  to {
    color: var(--el-text-color-primary);
  }
}
</style>
